<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="banner">
                <div class="top">
                    <div class="row">
                        <div class="item">
                            <img src="../../static/双人.png" alt="">
                            <div class="title">
                                新访客 1
                            </div>
                        </div>
                        <div class="item">
                            <img src="../../static/search.png" alt="">
                        </div>
                        <div class="item">
                            <img src="../../static/更多.png" alt="">

                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div class="avatar">
                            <img src="../../static//images/avatar.png" alt="">

                        </div>
                    </div>
                    <div class="right">
                        <div class="title">SiestaAmoro</div>
                        <div class="rark">
                            <div class="item">私密账号</div>
                            <div class="item">. 抖音号</div>
                            <div class="item">100861123</div>
                        </div
                    </div>
                </div>
        </div>
    </div>
</body>

</html>

<style>
    .name{
        display: inline-block
    }
    .container {
       width: 350px;
       margin: 0 auto;
       border: 1px solid #000;
       height: 800px;
       

    }

    .container .banner{
        position: relative;

        background: url(../../static/images/01.jpg);
        height: 200px;

    }
    .container .banner .bottom{
        display: flex;
        align-items: center;
        position: absolute;
        padding-left: 10px;
        padding-bottom: 10px;
        bottom: 0;
        left: 0;
    }
    .container .banner .top .row{
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
    }

    .container .banner .bottom .left .avatar img{
        width: 80px;
        height: 80px;
        border-radius: 100%;
    }
    .container .banner .bottom .right{
        margin-left: 10px;
    }
    .container .banner .bottom .right .rark{
       display: flex;
       /* color: #999999; */
    }
    .container .banner .top .row .item{
        
        height: 25px;
        border-radius: 20px;
        font-size: 13px;
        margin-right: 10px;
        padding: 10px;
        
        background: #888888;
    }
    .container .banner .top .row .item:nth-child(1) img{
        width: 36px;
        height: 36px;
    }
    .container .banner .top .row .item:nth-child(1)
    {
        display: flex;
        align-items: center;
    }
    .container .banner .top .row .item img{
        width: 26px;
        height: 26px;
    }
 
</style>